<!-- 聊天欢迎页面 -->
<script setup lang="ts">
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
// 导入图片
import img1 from '@/assets/images/ai-tools/1@2x.png';
import img2 from '@/assets/images/ai-tools/2@2x.png';
import img3 from '@/assets/images/ai-tools/3@2x.png';

import img4 from '@/assets/images/ai-tools/4@2x.png';
import img5 from '@/assets/images/ai-tools/5@2x.png';
import WelcomeText from '@/components/WelecomeText/index.vue';
import { useAgentStore } from '@/stores/modules/agent';

// 定义事件
const emit = defineEmits<{
  quickAction: [action: { agent: string; prompt: string }];
}>();

const agentStore = useAgentStore();

// 当前选中的功能
const selectedTab = ref<string | undefined>(undefined);

// 快捷功能数据
const tabs = [
  {
    title: '写报告',
    src: img1,
    agent: '所级报告大纲生成',
    prompt: ``,
    shortcuts: [],
  },
  {
    title: '读文档',
    src: img2,
    agent: '通用智能体',
    prompt: `文档概述：简要描述文档的主要内容和目的。关键信息提取：背景信息：提取文档中的背景信息，包括时间、地点、涉及的机构或个人等。核心问题：明确文档讨论的核心问题或主题。主要观点：列出文档中的主要观点或结论。重要数据：提取文档中的重要数据、统计信息或指标。行动建议：如果文档中有具体的行动建议或措施，请提取出来。结构化总结：将上述提取的信息整理成一个结构化的总结，以便快速查阅。结果要详细、突出重点、易于理解、严谨`,
    shortcuts: [
      {
        title: '详细整理这篇文档，输出格式清晰的总结',
        agent: '通用智能体',
        prompt: `详细整理这篇文档，输出格式清晰的总结`,
      },
      {
        title: '文档的主要内容是什么',
        agent: '通用智能体',
        prompt: `文档的主要内容是什么`,
      },
      {
        title: '根据上传文件生成思维导图',
        agent: '通用智能体',
        prompt: `根据上传文件生成思维导图`,
      },
    ],
  },
  {
    title: '一致性分析',
    src: img3,
    agent: '大文档解析比对',
    prompt: `作为专业报告分析师，请对文档在内容结构、项目重点、问题与改进措施三个维度进行梳理，列出关键差异，多使用表格展示比对结果，输出结构化评估报告：一、核心论点一致性检测‌：1.提取报告各章节核心论点及支持性论据；2.分析摘要、引言与结论部分的逻辑连贯性；3.标记存在矛盾/偏离的论点（如：第3章数据结论与摘要目标不符）；二、数据一致性验证‌：1.交叉核对所有数据引用来源（图表/文本）2.验证数据表述与原始资料的一致性（单位/时间范围/统计口径）3.识别未标注的异常数据波动（如：图5增长率与正文描述冲突）；2.检测术语使用一致性（如：'用户留存率'在2.1章与附录定义不同）；3.标注未明确定义的缩写词（如：首次出现的缩略语'LTV'未解释）；四、格式规范审查‌：1.检查标题层级、编号系统的连贯性；2.验证引用格式是否符合[指定标准如APA/GB-T 7714]；3.识别图表与对应分析文本的对应关系。输出要求：‌按严重等级分类问题（关键/重要/建议）;附修改建议（如：建议在第4.2章补充方法论描述以支持结论）;生成一致性评分（0-100分制）及改进优先级矩阵;分析对象：[在此插入待分析报告文本/上传文件]`,
    shortcuts: [
      {
        title: '详细分析文件的不一致地方',
        agent: '大文档解析比对',
        prompt: `详细分析文件的不一致地方`,
      },
      {
        title: '对比文件的主要内容',
        agent: '大文档解析比对',
        prompt: `对比文件的主要内容`,
      },
      {
        title: '分析文件逻辑不一致的地方',
        agent: '大文档解析比对',
        prompt: `分析文件逻辑不一致的地方`,
      },
    ],
  },
  {
    title: '数据报告',
    src: img4,
    agent: '通用智能体',
    prompt: `分析报告内容，确定涉及的专业范围，以该领域专家的角色根据提供的模版和测试数据文件完成报告编制。要求：数据准确，结构完整，逻辑清晰，表达自然流畅，风格一致，严格遵循专业模板格式要求，建立数据追溯机制防止虚构，若测试数据缺失必要字段需标注`,
    shortcuts: [
      {
        title: '按照报告模版将数据写入，生成报告',
        agent: '通用智能体',
        prompt: `按照报告模版将数据写入，生成报告`,
      },
    ],
  },
  {
    title: 'PPT生成',
    src: img5,
    agent: '生成MarkDown大纲',
    prompt: `您是一位专业的PPT内容生成专家，擅长根据结构化文档提炼核心要点。基于用户提供的文档材料，自动生成符合商务演示要求的PPT内容框架。内容必须严格遵循文档结构和核心数据，采用金字塔原理组织内容：结论先行→论点分层→论据支撑`,
    shortcuts: [
      {
        title: '按照文档，生成PPT内容',
        agent: '生成MarkDown大纲',
        prompt: `按照文档，生成PPT内容`,
      },
    ],
  },
];

// 处理功能按钮点击
function handleTabClick(tab: any) {
  selectedTab.value = tab.title;
}

// 返回主页面
function handleBack() {
  selectedTab.value = undefined;
}

// 处理快捷功能点击（直接开始对话）
function _handleQuickAction(action: { agent: string; prompt: string }) {
  // 设置智能体
  agentStore.setCurrentAgent({
    ...agentStore.currentAgent,
    name: action.agent,
  });
  // 发送事件
  emit('quickAction', action);
}

// 处理快捷输入项点击
function handleShortcut(shortcut: { agent: string; prompt: string }) {
  // 设置智能体
  agentStore.setCurrentAgent({
    ...agentStore.currentAgent,
    name: shortcut.agent,
  });
  // 发送事件
  emit('quickAction', shortcut);
}
</script>

<template>
  <div class="chat-welcome">
    <!-- 主页面 -->
    <div v-if="!selectedTab" class="main-page">
      <!-- 欢迎文本 -->
      <div class="welcome-section">
        <WelcomeText />
      </div>

      <!-- 快捷功能按钮 -->
      <div class="quick-actions">
        <div class="actions-row">
          <div v-for="tab in tabs" :key="tab.title" class="common-btn" @click="handleTabClick(tab)">
            <img :src="tab.src" :alt="tab.title" class="action-icon">
            <span class="action-title">{{ tab.title }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 选中功能页面 -->
    <div v-else class="selected-page">
      <!-- 返回按钮和标题 -->
      <div class="header-section">
        <div class="back-btn" @click="handleBack">
          <el-icon>
            <ArrowLeft />
          </el-icon>
        </div>
        <span class="page-title">{{ selectedTab }}</span>
      </div>

      <!-- 快捷输入项 -->
      <div class="shortcuts-section">
        <div class="shortcuts-container">
          <div
            v-for="shortcut in tabs.find(item => item.title === selectedTab)?.shortcuts" :key="shortcut.title"
            class="common-btn gray" @click="handleShortcut(shortcut)"
          >
            {{ shortcut.title }}
            <el-icon>
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 公共按钮样式
.common-btn {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  font-size: 14px;
  color: #333333;
  cursor: pointer;
  user-select: none;
  background: #ffffff;

  // border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
  transition: all 0.3s ease;
  .action-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }
  &:hover {
    background-color: #f5f8ff;

    // border-color: #e1e1e2;
    transform: translateY(-2px);
  }
  &:active {
    background-color: #eef1fd;
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 10%);
    transform: scale(0.98);
  }
  &.active {
    background: #eef1fd;
    border: 1px solid #cbd8f9;
  }
  &.gray {
    color: #787676;
    background: rgb(255 249 249);
  }
}
.chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 240px);
  padding: 20px;
  .main-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 800px;
    .welcome-section {
      margin-bottom: 40px;
      .welcome-text {
        display: flex;
        gap: 12px;
        align-items: center;
        font-size: 24px;
        font-weight: 600;
        color: #333333;
        .welcome-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          font-size: 20px;
          background: #2878ff;
          border-radius: 50%;
        }

        @media (width <=768px) {
          font-size: 20px;
          .welcome-icon {
            width: 32px;
            height: 32px;
            font-size: 16px;
          }
        }
      }
    }
    .quick-actions {
      .actions-row {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
      }
    }
  }
  .selected-page {
    width: 100%;
    max-width: 800px;
    .header-section {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      line-height: 40px;
      .back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin-right: 8px;
        cursor: pointer;
        background: #f5f5f5;
        border-radius: 6px;
        transition: all 0.3s ease;
        &:hover {
          background: #e8e8e8;
        }
        :deep(.el-icon) {
          font-size: 16px;
          color: #666666;
        }
      }
      .page-title {
        font-size: 16px;
        font-weight: bold;
        color: #333333;
      }
    }
    .shortcuts-section {
      .shortcuts-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
    }
  }
}
</style>
